<template>
    <div class="user_part">
         
    <!-- 搜索组件 -->
        <SearchaUser :plh_a="placeholdera" :plh_b="placeholderb"></SearchaUser>

        <!-- 表格 -->
        <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        >
            <el-table-column align="center" type="selection" width="55"> </el-table-column>
            <el-table-column align="center" prop="username" label="用户名"  sortable> </el-table-column>
            <el-table-column align="center" prop="power" label="权限" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column align="center" prop="cal" label="手机号"  sortable> </el-table-column>
            <el-table-column align="center" prop="sex" label="性别"  sortable> </el-table-column>
            <el-table-column align="center" prop="email" label="邮件"  width="300px" sortable> </el-table-column>
            <el-table-column align="center" prop="time" label="修改时间" width="200px" sortable> </el-table-column>
            <el-table-column align="center" label="操作" width="450px" >
                <template slot-scope="scope" >
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button size="mini" type="success" @click="dataPower(scope.$index, scope.row)">数据权限</el-button>
                    <el-button size="mini" type="success" @click="out(scope.$index, scope.row)">下线</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 数据权限弹窗 -->
        <el-dialog
        title="数据权限"
        :visible.sync="show"
        width="30%">
        <span>暂无数据...</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary" @click="show = false">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 编辑弹窗 -->
	    <DialogB :list="list" :url="url" :name="name" hd="修改"></DialogB>

        <!-- 分页组件 -->
        <Pagination :num="lists.length" router="/system/user/"></Pagination>
    

    </div>
</template>

<style lang="scss">
   .user_part {
       font-size: 12px;
   }
</style>


<script>
import Pagination from "@c/Pagination";
import SearchaUser from "@c/Searcha-user";
import DialogB from "@c/Dialog-b";

export default {
  components: { SearchaUser, Pagination, DialogB },
    data() {
        return {
            placeholdera: '请输入用户名',
            placeholderb: '请输入手机号',
            title: '用户管理',
            tableData: [],
            // 预览
            dialogVisible: false,
            // 数据权限
            show: false,
            list: {},
            // 数据总数
            lists: [],
            url: '/system/user/updata',
            name: ['用户名:', '权限:', '密码:', '手机号:', '邮件:', '性别:'],
            
        }
    },
    created() {
        this.$store.commit('title', this.title);
        // 预览
        this.$store.commit('dialogVisible', this.dialogVisible)
        this.getData()
        this.getDatas()
    },
    methods: {
        // 请求数据方法
        getData() {
            let params = this.$route.params;
            this.$http.get('/system/user', { params })
                .then(({ data }) => {
                   if(!data.errno) {
                       this.tableData = data.data
                   }
                })
            
        },
        getDatas() {
            this.$http.get('/system/users')
                .then(({ data }) => {
                   if(!data.errno) {
                       this.lists = data.data
                   }
                })
        },
        // 选择项发生变化
        handleSelectionChange() {
          
        },
        // 下线处理
        out(index, data) {
            this.$confirm('确定要让 '+ data.username + ' 下线么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
        },
        // 数据权限
        dataPower(index, data) {
            this.show = true;
        },
        //  编辑
        handleEdit(index, data) {
            this.$store.state.dialogVisible = true;
            this.list = data
        },
        // 删除
        handleDelete(index, data) {
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$http.get('/system/user/delete', { params: {_id: data._id}})
                    .then(({ data }) => {
                        if(!data.errno) {
                            this.$message({
                                message: data.msg,
                                type: 'success'
                            })
                            setTimeout(() => {
                                this.$router.go(0)
                            },1000)
                        }
                    })
                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                    });

        }

    },
    watch: {
        $route() {
            this.getData()
        }
    }

    
    
}
</script>